<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate ? true : false"
        @close="baTable.toggleForm"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="'100px'"
                    :rules="rules"
                    class="form"
                >
                <div style="width:100%">
                    <FormItem :label="t('conloadplan.TZID')" style="width:25%" type="string" v-model="baTable.form.items!.TZID" prop="TZID" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.TZID') }),disabled:true }" />
                </div>
                <FormItem 
                :label="t('conloadplan.CNTRNO')" 
                v-model="baTable.form.items!.CNTRNO" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': '/admin/conloadplan/box?tzid='+baTable.form.items!.TZID
                }"
                />
                <FormItem :label="t('conloadplan.SEALNO')" type="string" v-model="baTable.form.items!.SEALNO" prop="SEALNO" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.SEALNO') }) }" />
                <!-- <FormItem 
                :label="t('conloadplan.TRUCKCORP')" 
                v-model="baTable.form.items!.TRUCKCORP" 
                prop="TRUCKCORP" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': '/admin/conloadplan/car'
                }"  
                /> -->
                <el-form-item :label="t('conloadplan.TRUCKCORP')">
                    <el-select v-model="baTable.form.items!.TRUCKCORP" filterable  placeholder="请选择" @change="carChange">
                        <el-option
                        v-for="item in state.carList"
                        :key="item.corp"
                        :label="item.corp"
                        :value="item.corp"
                        />
                    </el-select>
                </el-form-item>

                <FormItem 
                :label="t('conloadplan.TRUCKNO')" type="string" v-model="baTable.form.items!.TRUCKNO" prop="TRUCKNO" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.TRUCKNO') }) }" />
                <FormItem :label="t('conloadplan.EMPTY')" type="string" v-model="baTable.form.items!.EMPTY" prop="EMPTY" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.EMPTY') }) }" />
                <FormItem 
                :label="t('conloadplan.CONSIZE')" 
                v-model="baTable.form.items!.CONSIZE" 
                prop="CONSIZE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=consize'
                }" 
                />
                <FormItem :label="t('conloadplan.DRIVER')" type="string" v-model="baTable.form.items!.DRIVER" prop="DRIVER" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.DRIVER') }) }" />
                <FormItem :label="t('conloadplan.TRAILERNO')" type="string" v-model="baTable.form.items!.TRAILERNO" prop="TRAILERNO" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.TRAILERNO') }) }" />
                <FormItem 
                :label="t('conloadplan.CONTYPE')" 
                v-model="baTable.form.items!.CONTYPE" prop="CONTYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=contype'
                }" 
                />
                
                <el-form-item :label="t('conloadplan.TXPLACE')">
                    <el-select v-model="baTable.form.items!.TXPLACE" filterable  placeholder="请选择">
                        <el-option
                        v-for="item in state.txList"
                        :key="item.remind"
                        :label="item.remind"
                        :value="item.remind"
                        />
                    </el-select>
                </el-form-item>
                
                <FormItem :label="t('conloadplan.FREESTORAGEFROM')" type="datetime" v-model="baTable.form.items!.FREESTORAGEFROM" prop="FREESTORAGEFROM" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.FREESTORAGEFROM') }) }" />
                <FormItem :label="t('conloadplan.DISTANCE')" type="number" prop="DISTANCE" v-model.number="baTable.form.items!.DISTANCE" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('conloadplan.DISTANCE') }) }" />
                <FormItem :label="t('conloadplan.GWET')" type="number" prop="GWET" v-model.number="baTable.form.items!.GWET" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.GWET') }) }" />
                <FormItem 
                :label="t('conloadplan.PACKERDESC')" 
                v-model="baTable.form.items!.PACKERDESC" 
                prop="PACKERDESC" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'remind',
                    field: 'remind',
                    'remote-url': '/admin/tz/all?sql='+`select remind from area where corp='${corp}' and port='装货地'`,

                }"
                />
                <FormItem :label="t('conloadplan.PACKERDATE')" type="datetime" v-model="baTable.form.items!.PACKERDATE" prop="PACKERDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.PACKERDATE') }) }" />
                <!-- 实际装货时间 -->
                <FormItem class="mark-label" :label="t('conloadplan.ZHDATE')" type="datetime" v-model="baTable.form.items!.ZHDATE" prop="ZHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.ZHDATE') }) }" />
                <!-- 实装重量/容积 -->
                <FormItem class="mark-label" :label="t('conloadplan.TAREWT')" type="number" prop="TAREWT" v-model.number="baTable.form.items!.TAREWT" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.TAREWT') }) }" />
                <FormItem 
                :label="t('conloadplan.SHPLACE')" 
                v-model="baTable.form.items!.SHPLACE" 
                prop="SHPLACE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'remind',
                    field: 'remind',
                    'remote-url': '/admin/tz/all?sql='+`select remind from area where corp='${corp}' and port='送货地'`,

                }"
                />
                <FormItem :label="t('conloadplan.FREESTORAGETO')" type="datetime" v-model="baTable.form.items!.FREESTORAGETO" prop="FREESTORAGETO" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.FREESTORAGETO') }) }" />
                <FormItem class="mark-label" :label="t('conloadplan.SHDATE')" type="datetime" v-model="baTable.form.items!.SHDATE" prop="SHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.SHDATE') }) }" />
                <FormItem class="mark-label" :label="t('conloadplan.TOTALWT')" type="number" prop="TOTALWT" v-model.number="baTable.form.items!.TOTALWT" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.TOTALWT') }) }" />
                <el-form-item :label="t('conloadplan.HCPLACE')">
                    <el-select v-model="baTable.form.items!.HCPLACE" filterable  placeholder="请选择">
                        <el-option
                        v-for="item in state.hcList"
                        :key="item.remind"
                        :label="item.remind"
                        :value="item.remind"
                        />
                    </el-select>
                </el-form-item>
                <!-- <FormItem 
                :label="t('conloadplan.SHPLACE')" 
                v-model="baTable.form.items!.SHPLACE" 
                prop="SHPLACE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': '/admin/conloadplan/hc'
                }"  
                /> -->
                <FormItem :label="t('conloadplan.HCDATE')" type="datetime" v-model="baTable.form.items!.HCDATE" prop="HCDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.HCDATE') }) }" />
                <FormItem :label="t('conloadplan.CONLOADPLANID')" type="string" v-model="baTable.form.items!.CONLOADPLANID" prop="CONLOADPLANID" :input-attr="{ placeholder: t('保存时自动生成'),disabled:true }" />
                <FormItem :label="t('conloadplan.LOADREMARK')" style="width:100%" type="textarea" v-model="baTable.form.items!.LOADREMARK" prop="LOADREMARK" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.LOADREMARK') }) }" />
                <FormItem :label="t('conloadplan.DESCRIPTION')" style="width:100%" type="files" v-model="baTable.form.items!.DESCRIPTION" prop="DESCRIPTION" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.DESCRIPTION') }) }" />
                <FormItem :label="t('conloadplan.OP')" type="string" v-model="baTable.form.items!.OP" prop="OP" :input-attr="{ placeholder: t('当前操作人'),disabled:true }" />
                <FormItem :label="t('conloadplan.OPTIME')" type="datetime" v-model="baTable.form.items!.OPTIME" prop="OPTIME" :input-attr="{ placeholder: t('当前时间'),disabled:true }" />
                

                <!-- <FormItem :label="t('conloadplan.PACKERPHONE')" type="string" v-model="baTable.form.items!.PACKERPHONE" prop="PACKERPHONE" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.PACKERPHONE') }) }" />
                <FormItem :label="t('conloadplan.PACKER')" type="string" v-model="baTable.form.items!.PACKER" prop="PACKER" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.PACKER') }) }" />
                <FormItem :label="t('conloadplan.PKGS')" type="number" prop="PKGS" v-model.number="baTable.form.items!.PKGS" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('conloadplan.PKGS') }) }" />
                <FormItem :label="t('conloadplan.SUMSIZE')" type="number" prop="SUMSIZE" v-model.number="baTable.form.items!.SUMSIZE" :input-attr="{ step: '0.0001', placeholder: t('Please input field', { field: t('conloadplan.SUMSIZE') }) }" />
                <FormItem :label="t('conloadplan.CONCORP')" type="string" v-model="baTable.form.items!.CONCORP" prop="CONCORP" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.CONCORP') }) }" />
                <FormItem :label="t('conloadplan.COC')" type="string" v-model="baTable.form.items!.COC" prop="COC" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.COC') }) }" />
                <FormItem :label="t('conloadplan.FCL')" type="string" v-model="baTable.form.items!.FCL" prop="FCL" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.FCL') }) }" />
                <FormItem :label="t('conloadplan.MIXNO')" type="string" v-model="baTable.form.items!.MIXNO" prop="MIXNO" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.MIXNO') }) }" />
                <FormItem :label="t('conloadplan.MIXSUM')" type="number" prop="MIXSUM" v-model.number="baTable.form.items!.MIXSUM" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('conloadplan.MIXSUM') }) }" />
                <FormItem :label="t('conloadplan.REMARK')" type="string" v-model="baTable.form.items!.REMARK" prop="REMARK" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.REMARK') }) }" />
                <FormItem :label="t('conloadplan.LOADBILLREMARK')" type="string" v-model="baTable.form.items!.LOADBILLREMARK" prop="LOADBILLREMARK" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.LOADBILLREMARK') }) }" />
                <FormItem :label="t('conloadplan.TRANSITEM')" type="string" v-model="baTable.form.items!.TRANSITEM" prop="TRANSITEM" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.TRANSITEM') }) }" />
                <FormItem :label="t('conloadplan.OCEANTRANSITEM')" type="string" v-model="baTable.form.items!.OCEANTRANSITEM" prop="OCEANTRANSITEM" :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.OCEANTRANSITEM') }) }" />
                 -->
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { codelib } from '/@/api/controllerUrls'
import createAxios from '/@/utils/axios'

const TZID = inject('TZID')
const corp = inject('corp')

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    TZID: [buildValidatorData({name: 'required', title: t('conloadplan.TZID')})],
    // CNTRNO: [buildValidatorData({name: 'varName', title: t('conloadplan.CNTRNO')})],
    PACKERDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.PACKERDATE') })})],
    OPTIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.OPTIME') })})],
    FREESTORAGEFROM: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.FREESTORAGEFROM') })})],
    FREESTORAGETO: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.FREESTORAGETO') })})],
    HCDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.HCDATE') })})],
    ZHDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.ZHDATE') })})],
    SHDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('conloadplan.SHDATE') })})],
})

const state = reactive({
    carList:[],
    hcList:[],
    txList:[]
})

watchEffect(()=>{
    if(baTable.form.operate == 'add'){
        baTable.form.items!.TZID = TZID!.value
        baTable.form.items!.CNTRNO = "CVTU1250174"
    }
})

onMounted(()=>{
    getCar()
    getHc()
    getTx()
})

const getCar = ()=>{
    createAxios({
        url:'/admin/conloadplan/car',
        method:'get'
    }).then((res:any)=>{
        state.carList = res.data.up
        // regins.value = res.data
    })
}
const getHc = ()=>{
    createAxios({
        url:'/admin/conloadplan/hc',
        method:'get'
    }).then((res:any)=>{
        state.hcList = res.data.up
        // regins.value = res.data
    })
}
const getTx = ()=>{
    createAxios({
        url:'/admin/conloadplan/tx',
        method:'get'
    }).then((res:any)=>{
        state.txList = res.data.up
        // regins.value = res.data
    })
}
//选择车队后填充 车队号 驾驶员 挂车车号
const carChange = (val:string)=>{
    createAxios({
        url:'/admin/tz/all?sql=select fullname from x_driver where corp='+`'${val}'`,
        method:'get'
    }).then((res:any)=>{
        if(res.data&&res.data.length){
            baTable.form.items!.DRIVER = res.data[0].fullname
        }
        // regins.value = res.data
    })
    createAxios({
        url:'/admin/tz/all?sql=select truckno from x_carinfo where corp='+`'${val}'`+` and carflag='1'`,
        method:'get'
    }).then((res:any)=>{
        if(res.data&&res.data.length){
            baTable.form.items!.TRUCKNO = res.data[0].truckno
        }
        // regins.value = res.data
    })
    createAxios({
        url:'/admin/tz/all?sql=select truckno from x_carinfo where corp='+`'${val}'`+` and carflag='2'`,
        method:'get'
    }).then((res:any)=>{
        if(res.data&&res.data.length){
            baTable.form.items!.TRAILERNO = res.data[0].truckno
        }
        // regins.value = res.data
    })
    
}


</script>

<style scoped lang="scss">
.form{
    display: flex;
    flex-wrap: wrap;
    >div{
        width: 25%;
    }
    :deep(.el-form-item__label){
        line-height: 16px;
        align-items: center;
        text-align: right;
    }
    :deep(.mark-label) label{
        color: red;
    }
}

</style>
